<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">utils</view>
			<view class="tui-page__desc">工具库，常用数据处理</view>
		</view>
		<view class="tui-page__bd tui-page__spacing">
			<view class="tui-section__title tui-ptop__0">去左右空格(原数值 12 34 )</view>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto" @click="trim">trim</tui-button>
			<view class="tui-section__title">去所有空格(原数值 12 34 )</view>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto" @click="trimAll">trimAll</tui-button>
			<view class="tui-section__title">替换相同字符串(o替换为空：GOOoooDo！)</view>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto" @click="replaceAll">replaceAll</tui-button>
			<view class="tui-section__title">格式化手机号码(13588079901)</view>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto" @click="formatNumber">formatNumber</tui-button>
			<view class="tui-section__title">金额格式化，保留两位小数(6971)</view>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto" @click="formatMoney">formatMoney</tui-button>
			<view class="tui-section__title">
				日期格式化。传入日期支持四种格式：1-日期字符串(2020/10/10 08:12:01) 2-时间戳(1602288721000) 3-日期字符串，无连接符(20201010081201) 4-new Date()时间格式(Thu Oct 01
				2020 00:00:00 GMT+0800 (中国标准时间))
			</view>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto" @click="formatDate1">y-m-d h:i:s</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="30rpx auto" @click="formatDate2">y-m-d h:i</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto 30rpx" @click="formatDate3">y-m-d</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto 30rpx" @click="formatDate4">h:i</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto" @click="formatDate5">y年m月d日</tui-button>
			<view class="tui-section__title">RGB颜色转十六进制颜色 51,51,51</view>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto" @click="rgbToHex">rgbToHex</tui-button>
			<view class="tui-section__title">十六进制颜色转RGB颜色 #333</view>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto" @click="hexToRGB">hexToRGB</tui-button>
			<view class="tui-section__title">唯一标识，随机数</view>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto" @click="unique">unique</tui-button>
			<view class="tui-section__title">简单数组合并去重[1,1,1,2,3,2],[2,3,4,5,5]</view>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto" @click="distinctArray">distinctArray</tui-button>
			<view class="tui-section__title">获取日期时间段 type：1-今天 2-昨天 3-本周 4-本月 5-本年。结束时间截至今天</view>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto" @click="getDateTimeSlot1">今天</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="30rpx auto" @click="getDateTimeSlot2">昨天</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto" @click="getDateTimeSlot3">本周</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="30rpx auto" @click="getDateTimeSlot4">本月</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto" @click="getDateTimeSlot5">本年</tui-button>
			<view class="tui-section__title">获取url参数 ?a=1&b=2 ==> {a: "1", b: "2"}</view>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto" @click="getUrlParam">getUrlParam</tui-button>
			<view class="tui-section__title">获取UUID xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx</view>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto" @click="getUUID">getUUID</tui-button>
			<view class="tui-section__title">函数防抖、函数节流等具体使用请查看文档</view>
		</view>
	</view>
</template>

<script>
import utils from '@/components/common/tui-utils/tui-utils.js'
export default {
	data() {
		return {};
	},
	methods: {
		trim() {
			let text = ' 12 34 ';
			let val = utils.trim(text);
			console.log(val);
			this.tui.toast(`原数值${text}长度：${text.length},去空格后${val}长度：${val.length}`, 4000);
		},
		trimAll() {
			let text = ' 12 34 ';
			let val = utils.trimAll(text);
			console.log(val);
			this.tui.toast(`原数值${text}长度：${text.length},去空格后${val}长度：${val.length}`, 4000);
		},
		replaceAll() {
			let val = utils.replaceAll('GOOoooDo！', 'o', '');
			console.log(val);
			this.tui.toast(val);
		},
		formatNumber() {
			let val = utils.formatNumber('13588079901');
			console.log(val);
			this.tui.toast(val);
		},
		formatMoney() {
			let val = utils.formatMoney('6971');
			console.log(val);
			this.tui.toast(val);
		},
		formatDate(format, date, type = 1) {
			let val = utils.formatDate(format, date, type);
			console.log(val);
			this.tui.toast(val);
		},
		formatDate1() {
			//年-月-日 时:分:秒
			this.formatDate('y-m-d h:i:s', '2020/10/10 08:12:01.234');
		},
		formatDate2() {
			//年-月-日 时:分
			this.formatDate('y-m-d h:i', '1602288721000', 2);
		},
		formatDate3() {
			//年-月-日
			this.formatDate('y-m-d', '20201010081201', 3);
		},
		formatDate4() {
			//时:分
			this.formatDate('h:i', '2020/10/10 08:12:01.234');
		},
		formatDate5() {
			this.formatDate('y年m月d日', new Date('2020/10/10 08:12:01'), 4);
		},
		rgbToHex() {
			let val = utils.rgbToHex(51, 51, 51);
			console.log(val);
			this.tui.toast(val);
		},
		hexToRGB() {
			let val = utils.hexToRGB('#333') || {};
			console.log(val);
			this.tui.toast(`${val.r},${val.g},${val.b}`);
		},
		unique() {
			let val = utils.unique();
			console.log(val);
			this.tui.toast(val);
		},
		distinctArray() {
			let arr1 = [1, 1, 1, 2, 3, 2];
			let arr2 = [2, 3, 4, 5, 5];
			let arr = utils.distinctArray(arr1, arr2);
			console.log(arr);
			this.tui.toast(JSON.stringify(arr));
		},
		getDateTimeSlot(type = 1) {
			let val = utils.getDateTimeSlot(type);
			console.log(val);
			let start = utils.formatDate('y-m-d h:i:s', val.start, 4);
			let end = utils.formatDate('y-m-d h:i:s', val.end, 4);
			this.tui.toast(`${start}至${end}`);
		},
		getDateTimeSlot1() {
			this.getDateTimeSlot(1);
		},
		getDateTimeSlot2() {
			this.getDateTimeSlot(2);
		},
		getDateTimeSlot3() {
			this.getDateTimeSlot(3);
		},
		getDateTimeSlot4() {
			this.getDateTimeSlot(4);
		},
		getDateTimeSlot5() {
			this.getDateTimeSlot(5);
		},
		getUrlParam(){
			let url='https://thorui.cn/doc?version=1.6.2&name=ThorUI组件库'
			let arr = utils.getUrlParam(url);
			console.log(arr);
			this.tui.toast(JSON.stringify(arr));
		},
		getUUID(){
			let UUID=utils.getUUID()
			console.log(UUID)
			this.tui.toast(UUID)
		}
	}
};
</script>

<style>
	.tui-section__title{
		padding-top: 50rpx;
		padding-bottom: 20rpx;
	}
	.tui-ptop__0{
		padding-top: 0;
	}
</style>
